<template>
    <section class="after-type-main base-main">
      <!--商品信息-->
      <AfterTypePorduct :product="product"></AfterTypePorduct>
      <!--商品信息-->

      <!--售后类型-->
      <div class="after-type-list mt10">
        <ul>
          <li
            @click="handleChooseType(index)"
            v-for="(item,index) in afterTypeList"
            :key="index"
            :class="index == afterTypeList.length-1 ? '' : 'line-bottom'">
            <span class="icon_ inline-block">
              <i class="iconfont iconwoyaotouzix"></i>
            </span>
            <div class="msg inline-block pr">
              <p class="fs14">{{item.title}}</p>
              <p class="color999AA3 fs12">{{item.label}}</p>
              <i class="pa iconfont icongengduox color999AA3"></i>
            </div>
          </li>
        </ul>
      </div>
      <!--售后类型-->

      <Loading :show="isLoading"></Loading>
    </section>
</template>

<script type="text/ecmascript-6">
  import AfterTypePorduct from '../../components/AfterTypePorduct'
  import Loading from '../../components/Loading.vue'

  export default {
    components:{
      AfterTypePorduct,Loading
    },
    data() {
      return {
        isLoading:false,
        product:{
          path:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=138126325,1485620701&fm=85&s=7FAB2EC3909A35D01E299C1A030010D2',
          name:'商品名称',
          model:'7332',
          number:2
        },//商品信息
        afterTypeList:[
          {
            iconfont:'icontuikuanx1',
            title:'仅退款',
            label:'未收到货（包含未签收），或卖家协商同意前提下',
          },
          {
            iconfont:'icontuihuox',
            title:'退货退款',
            label:'已收到货，需要退换已收到的货物',
          },
          {
            iconfont:'iconhuanhuox',
            title:'换货',
            label:'商品存在质量问题，联系卖家协商换货',
          },
        ]

      }
    },
    methods: {
      handleChooseType(index){
        this.$router.push({
          path:'/index/web/afterSaleSubmit',
          query:{type:index}
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/afterType.scss';
</style>
